<template>
  <div class="actions-setting">
    <div class="act">
      <div class="btn" @click="chooseOption">
        <img v-if="!optionsShow" src="@assets/gis/options_grey.svg" />
        <img v-else src="@assets/gis/options_select.svg" />
      </div>
      <div class="funs" v-if="optionsShow">
        <div
          :key="index"
          v-for="(item, index) in list"
          @click="chooseOptionFun(item.key)"
          :class="['fun', selectOptions.indexOf(item.key) < 0 ? 'fun-grey' : 'fun-select']"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      optionsShow: false, //选项开关
      list: [
        {
          name: '园区',
          key: 'park',
        },
        {
          name: '企业',
          key: 'enterprise',
        },
        {
          name: '敏感点',
          key: 'sensitive',
        },
      ],
    }
  },
  props: {
    selectOptions: {
      type: Array,
      default: ['park', 'enterprise', 'sensitive'],
    },
  },
  methods: {
    reset() {
      this.optionsShow = false
    },
    //选项
    chooseOption() {
      this.optionsShow = !this.optionsShow
    },
    //功能区
    chooseOptionFun(areaNo) {
      //触发父级函数
      this.$emit('hideMoudle', areaNo)
    },
  },
}
</script>
<style lang="less" scoped>
.actions-setting {
  width: auto;
  height: auto;
  pointer-events: none; /* 上层加上这句样式可以实现点击穿透 */
  .act {
    width: auto;
    height: 50px;
    position: relative;
    pointer-events: auto; /* 上层加上这句样式可以实现点击穿透 */
    .btn {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      z-index: 1;
      img {
        width: 100%;
        height: auto;
        display: block;
        cursor: pointer;
      }
    }
    .funs {
      width: auto;
      height: 50px;
      display: flex;
      position: absolute;
      top: 0;
      right: 50px;
      align-items: center;
      .fun {
        margin-top: 2px;
        width: 100px;
        height: 40px;
        color: rgba(0, 0, 0, 0.65);
        font-weight: 400;
        cursor: pointer;
        padding: 0 2px 5px 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>